// HelloWorld.Vue
<template>
  <!-- {{ rawData }} -->
  <!-- {{ winSize }} -->
  <!-- <el-button @click="test">test</el-button> -->
  <div class="chart" :id="_chartID">
    <div class="pos-test">{{ _chartID }}</div>
  </div>
</template>
<script>
import { bus } from '@/main.js';
// 引入 ECharts 主模块
import { mapState, mapMutations } from 'vuex';
// import * as echarts from 'echarts';
// import { option } from './optsBar.js';

import { init, dispose, registerIndicator } from 'klinecharts';
import { option } from './optsKLine2.js';
let _configOpts = option;

const fruits = [
  '🍏',
  '🍎',
  '🍐',
  '🍊',
  '🍋',
  '🍌',
  '🍉',
  '🍇',
  '🍓',
  '🍈',
  '🍒',
  '🍑',
  '🍍',
  '🥥',
  '🥝',
  '🥭',
  '🥑',
  '🍏',
];

export default {
  name: 'HelloWorld',
  components: {},
  props: {
    _chartID: {
      type: [String],
      default: function() {
        return 'chartID_0';
      },
    },
    stockCode: {
      type: [String],
      validator: function(value) {
        let re = new RegExp(/^\d{4,6}\.[A-Z]{2,3}$/);
        return re.test(value);
      },
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',

      linedata: [],
      chart: null,
      sfb: null,
    };
  },
  computed: {
    ...mapState(['winSize', 'stock']),

    params_code: function() {
      let p = {
        get_type: 'range',
        prod_code: this.stockCode,
        candle_period: 6,
        // fields
        search_direction: 2,
        data_count: 300,
        // start_date: this.$moment()
        //   .subtract(1, 'years')
        //   .format('YYYYMMDD'),
        // end_date: this.$moment().format('YYYYMMDD'),
      };
      return p;
    },
  },
  methods: {
    formatData: function(item) {
      let obj = {};
      return obj;
    }, //目前无用
    ajaxData: function() {},
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {
    registerIndicator({
      name: 'Custom',
      shortName: 'Custom',
      series: 'price',
      figures: [{ key: 'value', title: 'Custom', type: 'line' }],
      calc: (kLineDataList) => {
        return kLineDataList.map((kLineData) => {
          return {
            value: Math.random(), //kLineData.close,
            // text: '1',
            text: fruits[Math.floor(Math.random() * 17)],
          };
        });
      },
      draw: ({
        ctx,
        barSpace,
        visibleRange,
        indicator,
        xAxis,
        yAxis,
        kLineDataList,
      }) => {
        const { from, to } = visibleRange;
        // ctx.font = barSpace.gapBar + 'px' + ' Helvetica Neue';
        // ctx.textAlign = 'center';
        const result = indicator.result;
        for (let i = from; i < to; i++) {
          const data = result[i];
          const x = xAxis.convertToPixel(i);
          const y = yAxis.convertToPixel(data.value);
          // ctx.fillText(data.value, x, y);
        }
        return false;
      },
    });
  },
  mounted: function() {
    console.log('在实例挂载到DOM节点上之后');
    // this.ajaxData();
    this.chart = init(this._chartID, _configOpts);

    setTimeout(() => {
      this.chart.applyNewData(
        this.$store.getters['stock/getLineData']({
          onlyTS: true,
        })
      );
      this.chart.createIndicator('Custom', true, { id: 'candle_pane' });
    }, 1000);
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.chart {
  height: 100%;
  width: 100%;
  background-color: rgb(17, 18, 25);
}
.pos-test {
  position: absolute;
  top: 0;
  right: 10px;
  background-color: black;
  color: white;
}
</style>
